<template>
	<view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent"
		:style="{backgroundColor: backgroundColor}"
	>
		<view 
			class="mask-content"
			@click.stop.prevent="stopPrevent"
			:style="[{
				height: config.height, 
				transform: transform
			}]"
		>
			<scroll-view class="view-content" scroll-y>
				<view class="share-header text-orange">
					支付
				</view>
				<view class="flex flex-wrap text-black text-lg padding-lr-lg row-lj">
					<view >购买所需金币：</view>
					<view class="basis-lg price text-orange">{{buyItem.price}}</view>
				</view>
				<!-- <view class="flex flex-wrap text-black text-lg padding-lr-lg row-lj">
					<view >购买所需积分：</view>
					<view class="basis-lg price text-orange">300</view>
				</view> -->
				<view class="flex flex-wrap text-black text-lg padding-lr-lg row-lj">
					<view class="pay-type" >请选择支付方式：</view>
				</view>
				<view class="pay-type-list">
					<view class="type-item" @click="changePayType(1)">
						<text class="icon-gold cuIcon-coin" ></text>
						<view class="con">
							<text class="tit">金币支付</text>
						</view>
						<label class="radio">
							<radio value="" color="#4CA5FE" :checked='payType == 1' />
							</radio>
						</label>
					</view>
					<!-- <view class="type-item" @click="changePayType(2)">
						<text class="icon iconfont iconliwu text-blue" ></text>
						<view class="con">
							<text class="tit">积分支付</text>
						</view>
						<label class="radio">
							<radio value="" color="#4CA5FE" :checked='payType == 2' />
							</radio>
						</label>
					</view> -->
					<view class="type-item " @click="changePayType(2)">
						<text class="icon-weixin cuIcon-weixin"></text>
						<view class="con">
							<text class="tit">微信支付</text>
						</view>
						<label class="radio">
							<radio value="" color="#4CA5FE" :checked='payType == 3' />
							</radio>
						</label>
					</view>
					<!-- <view class="type-item " @click="changePayType(4)">
						<text class="icon yticon icon-alipay"></text>
						<view class="con">
							<text class="tit">支付宝支付</text>
						</view>
						<label class="radio">
							<radio value="" color="#4CA5FE" :checked='payType == 4' />
							</radio>
						</label>
					</view> -->
				</view>
			</scroll-view>
			<view class="bottom b-t" @click="confirm">
				<button class="buy-btn">确定购买</button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transform: 'translateY(50vh)',
				timer: 0,
				backgroundColor: 'rgba(0,0,0,0)',
				show: false,
				payType:1,
				config: {},
			};
		},
		props:{
			contentHeight:{
				type: Number,
				default: 0
			},
			//是否是tabbar页面
			hasTabbar:{
				type: Boolean,
				default: false
			},
			buyItem:{
				type: Object,
				default: function(){
					console.log(this)
					return [];
				}
			}
		},
		created() {
			const height = uni.upx2px(this.contentHeight) + 'px';
			this.config = {
				height: height,
				transform: `translateY(${height})`,
				backgroundColor: 'rgba(0,0,0,.4)',
			}
			this.transform = this.config.transform;
		},
		methods:{
			toggleMask(){
				console.log(this.buyItem)
				//防止高频点击
				if(this.timer == 1){
					return;
				}
				this.timer = 1;
				setTimeout(()=>{
					this.timer = 0;
				}, 500)
				
				if(this.show){
					this.transform = this.config.transform;
					this.backgroundColor = 'rgba(0,0,0,0)';
					setTimeout(()=>{
						this.show = false;
						this.hasTabbar && uni.showTabBar();
					}, 200)
					return;
				}
				
				this.show = true;
				//等待mask重绘完成执行
				if(this.hasTabbar){
					uni.hideTabBar({
						success: () => {
							setTimeout(()=>{
								this.backgroundColor = this.config.backgroundColor;
								this.transform = 'translateY(0px)';
							}, 10)
						}
					});
				}else{
					setTimeout(()=>{
						this.backgroundColor = this.config.backgroundColor;
						this.transform = 'translateY(0px)';
					}, 10)
				}
			},
			//防止冒泡和滚动穿透
			stopPrevent(){},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			//确认支付
			confirm: async function() {
				// uni.redirectTo({
				// 	url: '/pages/money/paySuccess'
				// })
				let uId = uni.getStorageSync('userId');
				let param = {
					price:this.buyItem.price,
					user_id:uId,
					file_id:this.buyItem.id,
					pay_way:this.payType,
					order_type:1,
					};
				let that = this;
				let data = await this.$http.post(
					'trainBuy', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				console.log(data);
				this.$emit('eventPay', this.buyItem);
				this.buyItem.pay_status=2;
				// this.$api.msg('购买成功');
				uni.showToast({
					title:'购买成功',
					icon:'none'
				})
				this.toggleMask();
			},
		}
	}
</script>

<style lang='scss'>
	.mask{
		position:fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display:flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 998;
		transition: .3s;
		.bottom{
			position:absolute;
			left: 0;
			bottom: 0;
			display:flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 90upx;
			background: #fff;
			z-index: 999;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
		}
	}
	
	.mask-content{
		width: 100%;
		height: 800upx;
		transition: .3s;
		background: #fff;
		&.has-bottom{
			padding-bottom: 90upx;
		}
		.view-content{
			height: 100%;
		}
	}
	.share-header{
		height: 110upx;
		font-size: $font-base+4upx;
		color: font-color-dark;
		display:flex;
		align-items:center;
		justify-content: center;
		padding-top: 10upx;
		&:before, &:after{
			content: '';
			width: 240upx;
			heighg: 0;
			/* border-top: 1px solid $border-color-base; */
			transform: scaleY(.5);
			margin-right: 30upx;
		}
		 &:after{
			 margin-left: 30upx;
			 margin-right: 0;
		 }
	}
	.row-lj{
		height: 30px;
		line-height: 30px;
		justify-content: space-between;
	}
	.pay-type{
		font-weight: bold;
		margin-top: 20upx;
	}
	.price{
		text-align: right;
		/* color: gold; */
	}
	.pay-type-list {
		
		background-color: #fff;
		padding-left: 40upx;
		
		.type-item{
			height: 80upx;
			padding-top: 10upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 40upx;
			font-size: 30upx;
			border: 0 !important;
			position:relative;
		}
		
		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-gold {
			color: #fe8e2e;
			font-size: 26px;
		}
		.icon-weixin {
			font-size: 26px;
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: 28upx;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	.buy-btn{
		width: 96%;
		margin: 2% 0;
		border-radius: 4rem;
		background: #FC7A7A;
		color: #FFF;
	}
</style>
